<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">用户相关</el-breadcrumb-item>
                <el-breadcrumb-item>充值记录</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 列表 -->
            <div class="userlist">
              <div class="status_box">
                <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" value-format="timestamp" format="yyyy 年 MM 月 dd 日" @change="getTime()" clearable  :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                <!-- <div class="input" @keyup.enter="findWalletList()">
                  <el-input v-model="input" placeholder="会员ID/车牌号" onfocus="this.placeholder=''" onblur="this.placeholder='会员ID'" clearable></el-input>
                </div> -->
                <div class="status status2">
                  <el-select v-model="value2" placeholder="车牌号">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <div class="input" @keyup.enter="findWalletList()"><el-input v-model="user_id" clearable></el-input></div>
                <div class="search"><el-button @click="findWalletList()">搜索</el-button></div>
                <div class="search">
                  <el-checkbox v-model="checked" :true-label=1 :false-label=2 @change="clickBtn()">购卡记录</el-checkbox>
                  <el-radio-group v-model="count" @change="clickBtn1()">
                    <el-radio :label="1">首购</el-radio>
                    <el-radio :label="2">复购</el-radio>
                    <el-radio :label="3">3次以上</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="message_notification">
                <el-table ref="multipleTable" :data="rechargePackageData" border tooltip-effect="dark" style="width: 100%" >
                  <!-- <el-table-column type="selection" fixed="left"></el-table-column> -->
                  <el-table-column prop="payTime" label="日期" :formatter="dateForma" width="200"></el-table-column>
                  <el-table-column prop="type" label="类型" width="150">
                    <template slot-scope="scope">
                      <span v-if="scope.row.type==1">收入</span>
                      <span v-if="scope.row.type==2">支出</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="money" label="金额" width="150">
                    <template slot-scope="scope">
                      <span v-if="scope.row.money>=0" class="status1">+ ¥ {{scope.row.money}}</span>
                      <span v-else class="status2"> ¥ {{scope.row.money}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="余额" width="150">
                    <template slot-scope="scope">
                      <span> ¥ {{parseFloat((scope.row.principal+scope.row.giveMoney).toFixed(2))}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="licence" label="车牌号" width="150"></el-table-column>
                  <el-table-column prop="userId" label="会员id" width="100"></el-table-column>
                  <el-table-column label="会员名" width="150">
                    <template slot-scope="scope">
                      <span v-if="scope.row.wechatNickname">{{scope.row.wechatNickname}}</span>
                      <span v-if="!scope.row.wechatNickname">{{scope.row.phoneNumber}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="payType" label="支付渠道" width="200">
                    <template slot-scope="scope">
                      <span v-if="scope.row.payType==1">支付宝</span>
                      <span v-if="scope.row.payType==2">微信</span>
                      <span v-if="scope.row.payType==3">微信小程序</span>
                      <span v-if="scope.row.payType==4">余额</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="payNo" label="交易单号">
                    <template slot-scope="scope">
                      <span v-if="scope.row.payNo">{{scope.row.payNo}}</span>
                      <span v-else>-</span>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="height: 50px;"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[50,100,150,200,250]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'PayRank',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id:null,//用户id
        page: 1,//页码
        pageSize: 50,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,//前往第几页
        rechargePackageData: [],//获取的列表数据
        input:null,//搜索框内容
        user_id: null,//会员id
        value2:'car_id',//车牌号
        options2: [{
          value: 'car_id',
          label: '车牌号',
        },{
          value: 'user_id',
          label: '会员ID',
        }],
        time:null,//时间段
        startTime:null,//开始时间
        endTime:null,//结束时间
        checked: 2,//购卡记录
        count:null,//购买次数
      }
    },
    mounted(){
      if(this.$route.query.data){
        this.id = JSON.parse(JSON.stringify(this.$route.query.data));
        console.log(this.id);
      }
      this.findWalletList();
    },
    filters: {
      numFilter (value) {// 截取当前数据到小数点后两位
        let realVal = parseFloat(value).toFixed(2)
        return realVal
      }
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      //获取充值列表
      getPayRank(){
        this.$axios.post(this.baseURL+'history',{
          "page": this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"充值列表");
          if(res.data.code==1){
            this.rechargePackageData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 查询
      findWalletList(){
        console.log("搜索内容：",this.input)
        var carId = null;//车牌号
        var userId = null;//会员id
        if(this.value2=="car_id"){//车牌号
          carId = this.user_id;
          console.log("车牌号:",carId);
        }else if(this.value2=="user_id"){//会员id
          userId = this.user_id;
          console.log("会员id:",userId);
        }

        this.$axios.post(this.baseURL+'history',{
          "page": this.page,
          "pageSize":this.pageSize,
          "startTime":this.startTime,
          "endTime":this.endTime,
          "userId":userId,//会员id
          "licence":carId,//车牌号
          "requestSource":"PC",
          "flag":this.checked,//购卡记录筛选
          "count":this.count,
        }).then((res)=>{
          console.log(res,"充值列表");
          if(res.data.code==1){
            this.rechargePackageData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //根据时间段查找
      getTime(){
        console.log(this.time)
        if(this.time==null){
          this.startTime = null
          this.endTime = null
        }else{
          this.startTime = this.time[0]
          this.endTime = this.time[1]
        }
        this.findWalletList()
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findWalletList();// 获取产品列表
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findWalletList();
      },
      //点击购卡记录
      clickBtn(){
        console.log(this.checked)

        if(this.checked==1){
          console.log("选中")
          this.findWalletList()
        }else{
          console.log("没有选中")
          this.count = null
          this.findWalletList()
        }
      },
      //点击首购
      clickBtn1(){
        console.log(this.checked)
        if(this.checked==2){
          this.$confirm('请先勾选"购卡记录"!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.count= null//将购买次数不选中
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
            this.count= null//将购买次数不选中
          });
        }else{
          this.findWalletList()
        }
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .searchBox{
    width: 100%;
    height: 50px;
    // border: #000000 1px solid;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: inline-block;
    .search{
      width: auto;
      height: 35px;
      margin: 10px 0px 9px;
      // border: #000000 1px solid;
      box-sizing: border-box;
      display: inline-block;
      span{
        height: 35px;
        line-height: 35px;
        display: inline-block;
      }
      >>> .el-range-editor.el-input__inner{
        padding: 0px;
      }
      >>> .el-input {
          width: 200px;
          display: inline-block;
          padding: 0 10px;
          height: 35px;
          line-height: 35px;
      }
      >>> .el-button {
        padding: 0 10px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        background-color: #ff5733;
        color: #fff;
      }
    }
  }
  >>> .el-input__inner {
    height: 35px!important;
    line-height: 35px!important;
  }
  >>> .el-input__inner:focus{
    border-color: #d5d5d5!important;
  }
  .status1{
    color: limegreen;
  }
  .status2{
    color: red;
  }
  >>> .el-date-editor{
    height: 35px!important;
    line-height: 35px!important;
    margin-top: 7px;
  }
  .search{
    width: auto!important;
    line-height: 35px;
    vertical-align: middle;
  }
  .search1{
    width: 20px;
    height: 20px;
    border: 1px solid #409eff;
    appearance: inherit;
    vertical-align: middle;
  }


  //更改单选框样式
  >>> .el-radio-group{
    margin-left: 10px;
  }
  >>> .el-radio{
    margin-right: 10px;
  }
  >>> .el-radio__inner{
    border-radius: 2px;
    display: inline-block!important;
  }
  >>> .el-radio__inner::after{
     display: inline-block;
     content: "";
     width: 4px;
     height: 7px;
     border: 1px solid #FFF;
     box-sizing: content-box;
     border-left: 0;
     border-top: 0;
     position: absolute;
     top: 1px;
     left: 3.5px;
     border-radius: 0;
     background-color: transparent;
     transform: rotate(45deg)!important;
  }

</style>
